<!--
---
layout: default
title: 组件
slug: components
lead: "高级组件设计."
base_url: "./"
---
 -->
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ZUI，一个简单灵活的前端框架。">
    <meta name="author" content="Zentao">

    <title>ZUI - 开源HTML5跨屏框架</title>

    <link href="css/zui.min.css" rel="stylesheet">
    <link href="css/doc.css" rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="../assets/html5shiv.js"></script>
    <script src="../assets/respond.js"></script>
    <![endif]-->
  </head>
  <body class="doc-components">
    <header data-tab="components">
    </header>
    <div id="main">
      <div class="page-header">
        <h1>组件</h1>
        <small>一些常用的组件，用于快速构建应用</small>
      </div>

      <section id="alerts">
        <div class="page-header">
          <h2>消息框 </h2>
        </div>

        <p>消息框能够轻松展示一些需要引起用户注意的内容。</p>

        <h3>不同感情色彩的消息框</h3>
        <p>这里提供了5中色彩的消息框用于不同场合。</p>
        <div class="example" contenteditable="true">
          <div class="alert">
            <strong>你好!</strong> 有一些内容你可能需要知道。
          </div>
          <div class="alert alert-success">
            <strong>太好了!</strong> 一切已准备就绪。
          </div>
          <div class="alert alert-info">
            <strong>Hi!</strong> 这条消息可能需要你注意。
          </div>
          <div class="alert alert-warning">
            <strong>注意!</strong> 看起来遇到一些问题。
          </div>
          <div class="alert alert-danger">
            <strong>不好了!</strong> 确实遇到了问题，请立即处理吧。
          </div>
        </div>
<pre class='prettyprint'>&lt;div class="alert"&gt;...&lt;/div&gt;
&lt;div class="alert alert-danger"&gt;...&lt;/div&gt;
&lt;div class="alert alert-success"&gt;...&lt;/div&gt;
&lt;div class="alert alert-warning"&gt;...&lt;/div&gt;
&lt;div class="alert alert-info"&gt;...&lt;/div&gt;</pre>

        <h3>使用图标</h3>
        <p>在消息框中使用醒目的合适的图标能更容易让用户接收。需要使<code>.alert</code>配合<code>.with-icon</code>参数一起使用。</p>
        <div class="example" contenteditable="true">
          <div class="alert with-icon">
            <i class="icon-inbox"></i>
            <div class="content"><strong>你好!</strong> 有一些内容你可能需要知道。</div>
          </div>
          <div class="alert alert-success with-icon">
            <i class="icon-ok-sign"></i>
            <div class="content"><strong>太好了!</strong> 一切已准备就绪。</div>
          </div>
          <div class="alert alert-info with-icon">
            <i class="icon-info-sign"></i>
            <div class="content"><strong>Hi!</strong> 这条消息可能需要你注意。</div>
          </div>
          <div class="alert alert-warning with-icon">
            <i class="icon-frown"></i>
            <div class="content"><strong>注意!</strong> 看起来遇到一些问题。</div>
          </div>
          <div class="alert alert-danger with-icon">
            <i class="icon-remove-sign"></i>
            <div class="content"><strong>不好了!</strong> 确实遇到了问题，请立即处理吧。</div>
          </div>
        </div>
<pre class='prettyprint'>&lt;div class="alert alert-success with-icon"&gt;
  &lt;i class="icon-ok-sign"&gt;&lt;/i&gt;
  &lt;div class="content"&gt;...&lt;/div&gt;
&lt;/div&gt;</pre>
        <h3>块级消息</h3>
        <p>块级消息框将没有外边距，适合用在页面顶部或者浮现在页面之上</p>
        <div class="example no-padding">
          <div class="alert alert-success alert-block with-icon">
            <i class="icon-ok-sign"></i>
            <div class="content"><strong>太好了!</strong> 一切已准备就绪。</div>
          </div>
        </div>

        <h3>消息框中的链接</h3>
        <p>当消息框中包含链接时，推荐使用工具栏<code>.alert-link</code>来使得链接的样式与消息框类型保持一致。</p>
        <div class="example">
          <div class="alert with-icon">
            <i class="icon-inbox"></i>
            <div class="content"><strong>你好!</strong> <a class="alert-link" href="###">有一些内容</a>你可能需要知道。</div>
          </div>
          <div class="alert with-icon alert-success">
            <i class="icon-ok-sign"></i>
            <div class="content"><strong>太好了!</strong> 一切已<a class="alert-link" href="###">准备就绪</a>。</div>
          </div>
          <div class="alert with-icon alert-info">
            <i class="icon-info-sign"></i>
            <div class="content"><strong>Hi!</strong> 这条消息可能<a class="alert-link" href="###">需要你注意</a>。</div>
          </div>
          <div class="alert with-icon alert-warning">
            <i class="icon-frown"></i>
            <div class="content"><strong>注意!</strong> 看起来遇到<a class="alert-link" href="###">一些问题</a>。</div>
          </div>
          <div class="alert with-icon alert-danger">
            <i class="icon-remove-sign"></i>
            <div class="content"><strong>不好了!</strong> 确实遇到了问题，请<a class="alert-link" href="###">立即处理</a>吧。</div>
          </div>
        </div>

        <h3>可以关闭的消息框</h3>
        <p>可以用一个可选的<code>.alert-dismissable</code>和关闭按钮。</p>
        <div class="example" contenteditable="true">
          <div class="alert alert-warning alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
            <strong>注意!</strong> 看起来遇到一些问题。
            <p>您可以点击右上角的 <i class='icon-remove'></i> 来关闭这条消息。</p>
          </div>
        </div>
      </section>

      <section id="code">
        <div class="page-header">
          <h2>代码 </h2>
        </div>
        <h3>内联代码</h3>
        <div class="example" contenteditable="true">
          <p>通过<code>&lt;code&gt;</code>标签内嵌一小段代码。</p>
        </div>
        <h3>基本代码块</h3>
        <p>基本代码块包含在<code>&lt;pre&gt;</code>内。</p>
        <div class="example" contenteditable="true">
          <pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;</code></pre>
        </div>
        <p>还可以使用<code>.pre-scrollable</code> class，其作用是设置max-height为350px，并在垂直方向展示滚动条。</p>

        <h3>代码高亮</h3>
        <p>代码高亮是通过根据代码语言语法给代码中的单词、字符标记为不同颜色来显示的方法。代码高亮能大大提高代码的查阅体验。在web界面加上代码高亮非常容易，在产品中如需要向用户展现代码应该使用代码高亮。</p>
        <p>这里推荐的方案是<a href="https://code.google.com/p/google-code-prettify/" target="_blank">Google Code Prettify</a>实现代码高亮。</p>
        <p>下面是一个php文件的示例：</p>
        <div class="example" contenteditable="true">
          <pre class="prettyprint linenums"><code>&lt;!doctype html&gt;&#10;&lt;html lang="en"&gt;&#10;  &lt;head&gt;&#10;    &lt;title&gt;Zentao Design Guidelines&lt;/title&gt;&#10;  &lt;/head&gt;&#10;  &lt;body&gt;&#10;  &lt;?php&#10;    echo "hello, world!";&#10;  ?&gt;&#10;  &lt;/body&gt;&#10;&lt;/html&gt;</code></pre>
        </div>
      </section>

      <section id="inputgroup" data-id="inputgroups">
        <div class="page-header">
          <h2>输入组 </h2>
        </div>
        <h3>类型</h3>
        <h4>基本类型</h4>
        <div class='alert alert-warning'>
          <h4>消除双边框</h4>
          <p>当按钮处于两个文本框中间时，需要在<code>.input-group-addon</code>上添加样式修复工具类<code>.fix-border</code>。</p>
        </div>
        <div class="example" contenteditable="true">
          <div class='row'>
            <div class="col-md-6">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="用户名">
                <span class="input-group-addon">@gmail.com</span>
              </div>
              <br>
              <div class="input-group">
                <span class="input-group-addon">@</span>
                <input type="text" class="form-control" placeholder="用户名">
              </div>
              <br>
              <div class="input-group">
                <span class="input-group-addon">@</span>
                <input type="text" class="form-control" placeholder="用户名">
                <span class="input-group-addon"><i class="icon icon-heart"></i></span>
              </div>
            </div>
            <div class="col-md-6">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="用户名">
                <span class="input-group-addon fix-border"><i class="icon icon-star"></i></span>
                <input type="text" class="form-control" placeholder="密码">
              </div>
              <br>
              <div class="input-group">
                <span class="input-group-addon"><i class='icon-user'></i></span>
                <input type="text" class="form-control" placeholder="用户名">
                <span class="input-group-addon fix-border"><i class="icon-key"></i></span>
                <input type="text" class="form-control" placeholder="密码">
              </div>
              <br>
              <div class="input-group">
                <span class="input-group-addon"><i class='icon-user'></i></span>
                <input type="text" class="form-control" placeholder="用户名">
                <span class="input-group-addon fix-border"><i class="icon-key"></i></span>
                <input type="text" class="form-control" placeholder="密码">
                <span class="input-group-addon"><i class="icon-ok"></i></span>
              </div>
            </div>
          </div>
        </div>

        <h4>连续分段的文本框</h4>
        <p>有时可能需要连续分段的文本框。这时需要在两个相邻的<code>.form-control</code>元素之间添加一个空的<code>.input-group-addon</code>，并同时添加工具栏</p>
        <div class='alert alert-warning'>
          <h4>兼容IE浏览器</h4>
          <p>因为IE8不支持<code>:empty</code>选择器，为兼容IE8浏览器，需要在<code>.input-group-addon</code>上添加额外的样式修复工具类<code>.fix-padding</code>。</p>
        </div>
        <div class="example" contenteditable="true">
          <div class='row'>
            <div class="col-md-6">
              <div class="input-group">
                <span class="input-group-addon">姓名</span>
                <input type="text" class="form-control" placeholder="姓氏">
                <span class="input-group-addon fix-border fix-padding"></span>
                <input type="text" class="form-control" placeholder="名字">
              </div>
            </div>
            <div class="col-md-6">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="省份">
                <span class="input-group-addon fix-border fix-padding"></span>
                <input type="text" class="form-control" placeholder="城市">
                <span class="input-group-addon fix-border fix-padding"></span>
                <input type="text" class="form-control" placeholder="县/市">
                <span class="input-group-addon fix-border fix-padding"></span>
                <input type="text" class="form-control" placeholder="社区/乡/镇">
                <span class="input-group-addon fix-border fix-padding"></span>
                <input type="text" class="form-control" placeholder="街道 门牌号">
              </div>
            </div>
          </div>
        </div>

        <h4>单选框和复选框</h4>
        <div class="example" contenteditable="true">
          <div class="row">
            <div class="col-md-6">
              <div class="input-group">
                <span class="input-group-addon">
                  <input type="checkbox">
                </span>
                <input type="text" class="form-control">
              </div>
            </div>
            <div class="col-md-6">
              <div class="input-group">
                <span class="input-group-addon">
                  <input type="radio">
                </span>
                <input type="text" class="form-control">
              </div>
            </div>
          </div>
        </div>

        <h4>带按钮</h4>
        <div class='alert alert-warning'>
          <h4>消除双边框</h4>
          <p>当按钮处于两个文本框中间时，需要在<code>.input-group-btn</code>上添加样式修复工具类<code>.fix-border</code>。</p>
        </div>
        <div class="example" contenteditable="true">
          <div class="row">
            <div class="col-md-6">
              <div class="input-group">
                <input type="text" class="form-control">
                <span class="input-group-btn">
                  <button class="btn btn-default" type="button">搜索</button>
                </span>
              </div>
              <br>
              <div class="input-group">
                <span class="input-group-btn">
                  <button class="btn btn-default" type="button">搜索</button>
                </span>
                <input type="text" class="form-control">
              </div>
            </div>
            <div class="col-md-6">
              <div class="input-group">
                <span class="input-group-addon"><i class='icon-search'></i></span>
                <input type="text" class="form-control">
                <span class="input-group-btn">
                  <button class="btn btn-default" type="button">搜索</button>
                </span>
              </div>
              <br>
              <div class="input-group">
                <span class="input-group-btn">
                  <button class="btn btn-default" type="button">搜索</button>
                </span>
                <input type="text" class="form-control">
                <span class="input-group-btn fix-border">
                  <button class="btn btn-default" type="button">搜索</button>
                </span>
                <input type="text" class="form-control">
              </div>
            </div>
          </div>
        </div>

        <h4>带下拉菜单的按钮</h4>
        <div class="example" contenteditable="true">
          <div class="row">
            <div class="col-md-6">
              <div class="input-group">
                <div class="input-group-btn">
                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">选项 <span class="caret"></span></button>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">选项</a></li>
                    <li><a href="#">另一个选项</a></li>
                    <li><a href="#">更多选项</a></li>
                    <li class="divider"></li>
                    <li><a href="#">特别内容</a></li>
                  </ul>
                </div><!-- /btn-group -->
                <input type="text" class="form-control">
              </div><!-- /input-group -->
            </div><!-- /.col-md-6 -->
            <div class="col-md-6">
              <div class="input-group">
                <input type="text" class="form-control">
                <div class="input-group-btn">
                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">选项 <span class="caret"></span></button>
                  <ul class="dropdown-menu pull-right" role="menu">
                    <li><a href="#">选项</a></li>
                    <li><a href="#">另一个选项</a></li>
                    <li><a href="#">更多选项</a></li>
                    <li class="divider"></li>
                    <li><a href="#">特别内容</a></li>
                  </ul>
                </div><!-- /btn-group -->
              </div><!-- /input-group -->
            </div><!-- /.col-md-6 -->
          </div>
        </div>

        <h4>使用Select</h4>
        <div class='alert alert-danger'>
          <h4>浏览器兼容性问题</h4>
          <p>通常并不推荐在输入框组中使用select元素。这样可能会带来难以处理的兼容性问题。推荐使用 <strong>Dropdown</strong> 或者 <strong>Chosen</strong>来代替下拉列表。</p>
        </div>
        <div class="example" contenteditable="true">
          <div class="row">
            <div class="col-md-6">
              <div class="input-group">
                <select class="form-control">
                  <option value="1">吃饭</option>
                  <option value="2">睡觉</option>
                  <option value="3">编程</option>
                </select>
                <span class="input-group-btn">
                  <button class="btn btn-default" type="button">搜索</button>
                </span>
              </div>
            </div>
            <div class="col-md-6">
              <div class="input-group">
                <span class="input-group-addon">地址</span>
                <select class="form-control">
                  <option value="1">省份</option>
                  <option value="2">北京</option>
                  <option value="3">上海</option>
                  <option value="3">广州</option>
                </select>
                <span class="input-group-addon fix-border fix-padding"></span>
                <select class="form-control">
                  <option value="1">市/县</option>
                  <option value="1">...</option>
                </select>
                <span class="input-group-addon fix-border fix-padding"></span>
                <input type="text" class="form-control" placeholder="社区/乡/镇">
                <span class="input-group-btn">
                  <button class="btn btn-default" type="button">确认</button>
                </span>
              </div>
            </div>
          </div>
        </div>

        <h4>分段按钮</h4>
        <div class="example" contenteditable="true">
          <div class="row">
            <div class="col-md-6">
              <div class="input-group">
                <div class="input-group-btn">
                  <button type="button" class="btn btn-default" tabindex="-1">主要选项</button>
                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                    <span class="caret"></span>
                    <span class="sr-only">更多选项</span>
                  </button>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">选项</a></li>
                    <li><a href="#">另一个选项</a></li>
                    <li><a href="#">更多选项</a></li>
                    <li class="divider"></li>
                    <li><a href="#">特别内容</a></li>
                  </ul>
                </div>
                <input type="text" class="form-control">
              </div><!-- /.input-group -->
            </div><!-- /.col-md-6 -->
            <div class="col-md-6">
              <div class="input-group">
                <input type="text" class="form-control">
                <div class="input-group-btn">
                  <button type="button" class="btn btn-default" tabindex="-1">主要选项</button>
                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                    <span class="caret"></span>
                    <span class="sr-only">更多选项</span>
                  </button>
                  <ul class="dropdown-menu pull-right" role="menu">
                    <li><a href="#">选项</a></li>
                    <li><a href="#">另一个选项</a></li>
                    <li><a href="#">更多选项</a></li>
                    <li class="divider"></li>
                    <li><a href="#">特别内容</a></li>
                  </ul>
                </div>
              </div><!-- /.input-group -->
            </div><!-- /.col-md-6 -->
          </div>
        </div>
      </section>

      <section id="listgroup">
        <div class="page-header">
          <h2>列表组 </h2>
        </div>

        <h3>类型</h3>
        <h4>基本类型</h4>
        <div class="example" contenteditable="true">
          <ul class="list-group">
            <li class="list-group-item"><a href='#'>用ul > li实现，点击区域只有文字</a></li>
            <li class="list-group-item">todo </li>
            <li class="list-group-item">story</li>
            <li class="list-group-item">task</li>
            <li class="list-group-item">bug</li>
            <li class="list-group-item">case</li>
          </ul>
        </div>
        <h4>链接</h4>
        <div class="example" contenteditable="true">
          <div class="list-group">
            <a href="#" class="list-group-item">用div > a实现，实现整行点击 </a>
            <a href="#" class="list-group-item">todo </a>
            <a href="#" class="list-group-item">story</a>
            <a href="#" class="list-group-item active">task active</a>
            <a href="#" class="list-group-item">bug</a>
            <a href="#" class="list-group-item">case</a>
          </div>
        </div>

        <h3>变化</h3>
        <h4>定制列表内容</h4>
        <div class="example" contenteditable="true">
          <div class="list-group">
            <a href="#" class="list-group-item">
              <h4 class="list-group-item-heading">我是包含在a标签里面的h4标签</h4>
              <p class="list-group-item-text">我是包含在a标签里面的p标签，</p>
            </a>
            <a href="#" class="list-group-item active">
              <h4 class="list-group-item-heading">我是包含在a标签里面的h4标签</h4>
              <p class="list-group-item-text">我是包含在a标签里面的p标签，</p>
            </a>
            <a href="#" class="list-group-item">
              <h4 class="list-group-item-heading">我是包含在a标签里面的h4标签</h4>
              <p class="list-group-item-text">我是包含在a标签里面的p标签，</p>
            </a>
          </div>
        </div>

      </section>

      <section id="navs">
        <div class="page-header">
          <h2>导航 </h2>
        </div>
        <h3>主要导航</h3>
        <p><code>.nav-primary</code></p>
        <div spellcheck="false" class="example" contenteditable="true">
          <ul class="nav nav-primary">
            <li class="active"><a href="###"><i class="icon-home"></i> 首页</a></li>
            <li><a href="###"><i class="icon-user"></i> 个人资料 <span class="label label-badge label-success">4</span></a></li>
            <li><a href="###"><i class="icon-comment"></i> 消息 <span class="label label-dot label-danger"></span></a></li>
            <li>
              <a class="dropdown-toggle" data-toggle="dropdown" href="###">
                更多 <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a href="">Lorem ipsum.</a></li>
                <li><a href="">Optio, fuga.</a></li>
                <li><a href="">Dicta, vero.</a></li>
                <li><a href="">Doloribus, obcaecati.</a></li>
              </ul>
            </li>
          </ul>
        </div>

        <h3>次要导航</h3>
        <p>通常与主导航一起使用</p>
        <p><code>.nav-secondary</code></p>
        <div spellcheck="false" class="example" contenteditable="true">
          <ul class="nav nav-secondary">
            <li class="active"><a href="###">首页</a></li>
            <li><a href="###">个人资料</a></li>
            <li><a href="###">消息</a></li>
            <li>
              <a class="dropdown-toggle" data-toggle="dropdown" href="###">
                更多 <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a href="">Lorem ipsum.</a></li>
                <li><a href="">Optio, fuga.</a></li>
                <li><a href="">Dicta, vero.</a></li>
                <li><a href="">Doloribus, obcaecati.</a></li>
              </ul>
            </li>
          </ul>
        </div>

        <h3>复合导航</h3>
        <p>复合导航包含一个主要导航和一个次要导航</p>


        <h3>标签页导航</h3>
        <p><code>.nav-tabs</code></p>
        <div spellcheck="false" class="example" contenteditable="true">
          <ul class="nav nav-tabs">
            <li class="active"><a href="###">首页</a></li>
            <li><a href="###">个人资料</a></li>
            <li><a href="###">消息</a></li>
            <li>
              <a class="dropdown-toggle" data-toggle="dropdown" href="###">
                更多 <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a href="">Lorem ipsum.</a></li>
                <li><a href="">Optio, fuga.</a></li>
                <li><a href="">Dicta, vero.</a></li>
                <li><a href="">Doloribus, obcaecati.</a></li>
              </ul>
            </li>
          </ul>
        </div>

        <h3>圆点导航</h3>
        <p><code>.nav-pills</code></p>
        <div spellcheck="false" class="example" contenteditable="true">
          <ul class="nav nav-pills">
            <li class="active"><a href="###">首页</a></li>
            <li><a href="###">个人资料</a></li>
            <li><a href="###">消息</a></li>
            <li>
              <a class="dropdown-toggle" data-toggle="dropdown" href="###">
                更多 <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a href="">Lorem ipsum.</a></li>
                <li><a href="">Optio, fuga.</a></li>
                <li><a href="">Dicta, vero.</a></li>
                <li><a href="">Doloribus, obcaecati.</a></li>
              </ul>
            </li>
          </ul>
        </div>

        <h2>状态</h2>
        <h3>禁用的导航链接</h3>
        <p>在禁用的项目上添加<code>.disabled</code></p>
        <div spellcheck="false" class="example" contenteditable="true">
          <ul class="nav nav-tabs">
            <li class="active"><a href="###">首页</a></li>
            <li><a href="###">个人资料</a></li>
            <li class="disabled"><a href="###">消息</a></li>
            <li>
              <a class="dropdown-toggle" data-toggle="dropdown" href="###">
                更多 <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a href="">Lorem ipsum.</a></li>
                <li><a href="">Optio, fuga.</a></li>
                <li><a href="">Dicta, vero.</a></li>
                <li><a href="">Doloribus, obcaecati.</a></li>
              </ul>
            </li>
          </ul>
          <br>
          <ul class="nav nav-pills">
            <li class="active"><a href="###">首页</a></li>
            <li><a href="###">个人资料</a></li>
            <li class="disabled"><a href="###">消息</a></li>
            <li>
              <a class="dropdown-toggle" data-toggle="dropdown" href="###">
                更多 <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a href="">Lorem ipsum.</a></li>
                <li><a href="">Optio, fuga.</a></li>
                <li><a href="">Dicta, vero.</a></li>
                <li><a href="">Doloribus, obcaecati.</a></li>
              </ul>
            </li>
          </ul>
          <br>
          <ul class="nav nav-secondary">
            <li class="active"><a href="###">首页</a></li>
            <li><a href="###">个人资料</a></li>
            <li class="disabled"><a href="###">消息</a></li>
            <li>
              <a class="dropdown-toggle" data-toggle="dropdown" href="###">
                更多 <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a href="">Lorem ipsum.</a></li>
                <li><a href="">Optio, fuga.</a></li>
                <li><a href="">Dicta, vero.</a></li>
                <li><a href="">Doloribus, obcaecati.</a></li>
              </ul>
            </li>
          </ul>
        </div>

        <h2>参数</h2>
        <h3>垂直排列</h3>
        <p><code>.nav-stacked</code></p>
        <div spellcheck="false" class="example" contenteditable="true">
          <ul class="nav nav-primary nav-stacked">
            <li class="active"><a href="###"><i class="icon-home"></i> 首页 <i class="icon-heart pull-right"></i></a></li>
            <li><a href="###"><i class="icon-user"></i> 个人资料 <span class="label label-badge label-success pull-right">4</span></a></li>
            <li><a href="###"><i class="icon-comment"></i> 消息 <span class="label label-dot label-danger"></span></a></li>
            <li>
              <a class="dropdown-toggle" data-toggle="dropdown" href="###">
                更多 <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a href="">Lorem ipsum.</a></li>
                <li><a href="">Optio, fuga.</a></li>
                <li><a href="">Dicta, vero.</a></li>
                <li><a href="">Doloribus, obcaecati.</a></li>
              </ul>
            </li>
          </ul>
          <br>
          <ul class="nav nav-secondary nav-stacked">
            <li class="active"><a href="###"><i class="icon-home"></i> 首页 <i class="icon-heart pull-right"></i></a></li>
            <li><a href="###"><i class="icon-user"></i> 个人资料 <span class="label label-badge label-success pull-right">4</span></a></li>
            <li><a href="###"><i class="icon-comment"></i> 消息 <span class="label label-dot label-danger"></span></a></li>
            <li>
              <a class="dropdown-toggle" data-toggle="dropdown" href="###">
                更多 <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a href="">Lorem ipsum.</a></li>
                <li><a href="">Optio, fuga.</a></li>
                <li><a href="">Dicta, vero.</a></li>
                <li><a href="">Doloribus, obcaecati.</a></li>
              </ul>
            </li>
          </ul>
          <br>
          <ul class="nav nav-stacked nav-pills">
            <li class="active"><a href="###"><i class="icon-home"></i> 首页 <i class="icon-heart pull-right"></i></a></li>
            <li><a href="###"><i class="icon-user"></i> 个人资料 <span class="label label-badge label-success pull-right">4</span></a></li>
            <li><a href="###"><i class="icon-comment"></i> 消息 <span class="label label-dot label-danger"></span></a></li>
            <li>
              <a class="dropdown-toggle" data-toggle="dropdown" href="###">
                更多 <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a href="">Lorem ipsum.</a></li>
                <li><a href="">Optio, fuga.</a></li>
                <li><a href="">Dicta, vero.</a></li>
                <li><a href="">Doloribus, obcaecati.</a></li>
              </ul>
            </li>
          </ul>
        </div>

        <h3>自适应宽度</h3>
        <p>自适应宽度不能与垂直排列同时使用</p>
        <p><code>.nav-justified</code></p>
        <div spellcheck="false" class="example" contenteditable="true">
          <ul class="nav nav-primary nav-justified">
            <li class="active"><a href="###"><i class="icon-home"></i> 首页 <i class="icon-heart pull-right"></i></a></li>
            <li><a href="###"><i class="icon-user"></i> 个人资料 <span class="label label-badge label-success pull-right">4</span></a></li>
            <li><a href="###"><i class="icon-comment"></i> 消息 <span class="label label-dot label-danger"></span></a></li>
            <li>
              <a class="dropdown-toggle" data-toggle="dropdown" href="###">
                更多 <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a href="">Lorem ipsum.</a></li>
                <li><a href="">Optio, fuga.</a></li>
                <li><a href="">Dicta, vero.</a></li>
                <li><a href="">Doloribus, obcaecati.</a></li>
              </ul>
            </li>
          </ul>
          <br>
          <ul class="nav nav-justified nav-tabs">
            <li class="active"><a href="###"><i class="icon-home"></i> 首页 <i class="icon-heart pull-right"></i></a></li>
            <li><a href="###"><i class="icon-user"></i> 个人资料 <span class="label label-badge label-success pull-right">4</span></a></li>
            <li><a href="###"><i class="icon-comment"></i> 消息 <span class="label label-dot label-danger"></span></a></li>
            <li>
              <a class="dropdown-toggle" data-toggle="dropdown" href="###">
                更多 <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a href="">Lorem ipsum.</a></li>
                <li><a href="">Optio, fuga.</a></li>
                <li><a href="">Dicta, vero.</a></li>
                <li><a href="">Doloribus, obcaecati.</a></li>
              </ul>
            </li>
          </ul>
          <br>
          <ul class="nav nav-secondary nav-justified">
            <li class="active"><a href="###"><i class="icon-home"></i> 首页 <i class="icon-heart pull-right"></i></a></li>
            <li><a href="###"><i class="icon-user"></i> 个人资料 <span class="label label-badge label-success pull-right">4</span></a></li>
            <li><a href="###"><i class="icon-comment"></i> 消息 <span class="label label-dot label-danger"></span></a></li>
            <li>
              <a class="dropdown-toggle" data-toggle="dropdown" href="###">
                更多 <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a href="">Lorem ipsum.</a></li>
                <li><a href="">Optio, fuga.</a></li>
                <li><a href="">Dicta, vero.</a></li>
                <li><a href="">Doloribus, obcaecati.</a></li>
              </ul>
            </li>
          </ul>
          <br>
          <ul class="nav nav-justified nav-pills">
            <li class="active"><a href="###"><i class="icon-home"></i> 首页 <i class="icon-heart pull-right"></i></a></li>
            <li><a href="###"><i class="icon-user"></i> 个人资料 <span class="label label-badge label-success pull-right">4</span></a></li>
            <li><a href="###"><i class="icon-comment"></i> 消息 <span class="label label-dot label-danger"></span></a></li>
            <li>
              <a class="dropdown-toggle" data-toggle="dropdown" href="###">
                更多 <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a href="">Lorem ipsum.</a></li>
                <li><a href="">Optio, fuga.</a></li>
                <li><a href="">Dicta, vero.</a></li>
                <li><a href="">Doloribus, obcaecati.</a></li>
              </ul>
            </li>
          </ul>
        </div>

        <h3>带标题的导航</h3>
        <div spellcheck="false" class="example" contenteditable="true">
          <ul class="nav nav-tabs">
            <li class="nav-heading">这是标题</li>
            <li class="active"><a href="###">首页</a></li>
            <li><a href="###">个人资料</a></li>
            <li class="disabled"><a href="###">消息</a></li>
            <li>
              <a class="dropdown-toggle" data-toggle="dropdown" href="###">
                更多 <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a href="">Lorem ipsum.</a></li>
                <li><a href="">Optio, fuga.</a></li>
                <li><a href="">Dicta, vero.</a></li>
                <li><a href="">Doloribus, obcaecati.</a></li>
              </ul>
            </li>
          </ul>
          <br>
          <ul class="nav nav-pills">
            <li class="nav-heading">这是标题</li>
            <li class="active"><a href="###">首页</a></li>
            <li><a href="###">个人资料</a></li>
            <li class="disabled"><a href="###">消息</a></li>
            <li>
              <a class="dropdown-toggle" data-toggle="dropdown" href="###">
                更多 <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a href="">Lorem ipsum.</a></li>
                <li><a href="">Optio, fuga.</a></li>
                <li><a href="">Dicta, vero.</a></li>
                <li><a href="">Doloribus, obcaecati.</a></li>
              </ul>
            </li>
          </ul>
          <br>
          <ul class="nav nav-secondary">
            <li class="nav-heading">This is heading</li>
            <li class="active"><a href="###">首页</a></li>
            <li><a href="###">个人资料</a></li>
            <li class="disabled"><a href="###">消息</a></li>
            <li>
              <a class="dropdown-toggle" data-toggle="dropdown" href="###">
                更多 <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a href="">Lorem ipsum.</a></li>
                <li><a href="">Optio, fuga.</a></li>
                <li><a href="">Dicta, vero.</a></li>
                <li><a href="">Doloribus, obcaecati.</a></li>
              </ul>
            </li>
          </ul>
          <br>
          <ul class="nav nav-primary nav-stacked">
            <li class="nav-heading">这是标题</li>
            <li class="active"><a href="###"><i class="icon-home"></i> 首页 <i class="icon-heart pull-right"></i></a></li>
            <li><a href="###"><i class="icon-user"></i> 个人资料 <span class="label label-badge label-success pull-right">4</span></a></li>
            <li><a href="###"><i class="icon-comment"></i> 消息 <span class="label label-dot label-danger"></span></a></li>
            <li>
              <a class="dropdown-toggle" data-toggle="dropdown" href="###">
                更多 <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a href="">Lorem ipsum.</a></li>
                <li><a href="">Optio, fuga.</a></li>
                <li><a href="">Dicta, vero.</a></li>
                <li><a href="">Doloribus, obcaecati.</a></li>
              </ul>
            </li>
          </ul>
          <br>
          <ul class="nav nav-secondary nav-stacked">
            <li class="nav-heading">THIS IS HEADINGS</li>
            <li class="active"><a href="###"><i class="icon-home"></i> 首页 <i class="icon-heart pull-right"></i></a></li>
            <li><a href="###"><i class="icon-user"></i> 个人资料 <span class="label label-badge label-success pull-right">4</span></a></li>
            <li><a href="###"><i class="icon-comment"></i> 消息 <span class="label label-dot label-danger"></span></a></li>
            <li>
              <a class="dropdown-toggle" data-toggle="dropdown" href="###">
                更多 <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a href="">Lorem ipsum.</a></li>
                <li><a href="">Optio, fuga.</a></li>
                <li><a href="">Dicta, vero.</a></li>
                <li><a href="">Doloribus, obcaecati.</a></li>
              </ul>
            </li>
          </ul>
          <br>
          <ul class="nav nav-stacked nav-pills">
            <li class="nav-heading">THIS IS HEADINGS</li>
            <li class="active"><a href="###"><i class="icon-home"></i> 首页 <i class="icon-heart pull-right"></i></a></li>
            <li><a href="###"><i class="icon-user"></i> 个人资料 <span class="label label-badge label-success pull-right">4</span></a></li>
            <li><a href="###"><i class="icon-comment"></i> 消息 <span class="label label-dot label-danger"></span></a></li>
            <li>
              <a class="dropdown-toggle" data-toggle="dropdown" href="###">
                更多 <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a href="">Lorem ipsum.</a></li>
                <li><a href="">Optio, fuga.</a></li>
                <li><a href="">Dicta, vero.</a></li>
                <li><a href="">Doloribus, obcaecati.</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </section>

      <section id="navbars">
        <div class="page-header">
          <h2>导航条 </h2>
        </div>

        <h3>简单导航条</h3>
        <p>简单导航条并没用添加过多的样式。便于进行定制。</p>
        <div spellcheck="false" class="example" contenteditable="true">
          <nav class="navbar" role="navigation">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Brand</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-collapse-example">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    <li class="divider"></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
              </ul>
              <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                  <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
              </form>
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </nav>
        </div>

        <h3>默认导航条</h3>
        <p><code>.navbar-default</code></p>
        <div spellcheck="false" class="example" contenteditable="true">
          <nav class="navbar navbar-default" role="navigation">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Brand</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-collapse-example">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    <li class="divider"></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </nav>
        </div>

        <h3>深色导航条</h3>
        <p><code>.navbar-inverse</code></p>
        <div spellcheck="false" class="example" contenteditable="true">
          <nav class="navbar navbar-inverse" role="navigation">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Brand</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-collapse-example">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    <li class="divider"></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </nav>
        </div>

        <h3>使用表单元素</h3>
        <div spellcheck="false" class="example" contenteditable="true">
          <nav class="navbar navbar-inverse" role="navigation">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Brand</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-collapse-example">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    <li class="divider"></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
              </ul>
              <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                  <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
              </form>
            </div><!-- /.navbar-collapse -->
          </nav>
        </div>

        <h3>将内容放置与导航右侧</h3>
        <div spellcheck="false" class="example" contenteditable="true">
          <nav class="navbar navbar-default" role="navigation">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Brand</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-collapse-example">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    <li class="divider"></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
              </ul>
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </nav>
        </div>

        <h3>自适应宽度</h3>
        <p>在<code>.nav</code>上添加<code>.nav-justified</code>。</p>
        <div spellcheck="false" class="example" contenteditable="true">
          <nav class="navbar navbar-default" role="navigation">
            <ul class="nav navbar-nav nav-justified">
              <li class="cat-item nav-system-home"><a href="/">首页</a></li>
              <li class="cat-item nav-custom-"><a href="">演示</a></li>
              <li class="cat-item nav-article-1 active"><a href="/download.html">下载</a></li>
              <li class="cat-item nav-custom-"><a href="http://www.chanzhi.net" target="_blank">云蝉知</a></li>
              <li class="cat-item nav-system-help"><a href="/help/">帮助</a></li>
              <li class="cat-item nav-custom-"><a href="http://www.chanzhi.org/vip/25_vip-support.html">支持</a></li>
              <li class="cat-item nav-system-forum"><a href="/forum/">论坛</a></li>
              <li class="cat-item nav-article-2 active"><a href="/dynamic.html">动态</a></li>
              <li class="cat-item nav-custom-"><a href="">团队</a></li>
            </ul>
          </nav>
        </div>
      </section>

      <section id="menu">
        <div class="page-header">
          <h2>垂直菜单 </h2>
        </div>

        <p>垂直菜单可以方便的为您的应用创建可折叠的菜单。</p>
        <h3>实例</h3>
        <div class="example" contenteditable="false">
          <nav class="menu" data-toggle='menu' style='width: 200px'>
            <button class="btn btn-primary"><i class="icon-edit"></i> CREATE</button>
            <button class="btn"><i class="icon-cloud-upload"></i> UPLOAD</button>
            <ul class="nav nav-primary">
              <li><a href="###"><i class="icon-th"></i> Dashboard</a></li>
              <li><a href="###"><i class="icon-user"></i> Me</a></li>
              <li>
                <a href="###"><i class="icon-time"></i> Time</a>
                <ul class="nav">
                  <li><a href="###">Today</a></li>
                  <li><a href="###">Tomarrow</a></li>
                  <li><a href="###">Yestorday</a></li>
                  <li><a href="###">This Week</a></li>
                </ul>
              </li>
              <li><a href="###"><i class="icon-trash"></i> Trash</a></li>
              <li><a href="###"><i class="icon-list-ul"></i> All</a></li>
              <li class='active show'>
                <a href="###"><i class="icon-tasks"></i> Status</a>
                <ul class="nav">
                  <li><a href="###"><i class="icon-circle-blank"></i> Ready</a></li>
                  <li class='active'><a href="###"><i class="icon-play-sign"></i> Ongoing</a></li>
                  <li><a href="###"><i class="icon-ok-sign"></i> Completed</a></li>
                </ul>
              </li>
            </ul>
          </nav>
        </div>
<pre class='prettyprint'><code>&lt;nav class=&quot;menu&quot; data-toggle=&quot;menu&quot; style=&quot;width: 200px&quot;&gt;
  &lt;button class=&quot;btn btn-primary&quot;&gt;&lt;i class=&quot;icon-edit&quot;&gt;&lt;/i&gt; CREATE&lt;/button&gt;
  &lt;button class=&quot;btn&quot;&gt;&lt;i class=&quot;icon-cloud-upload&quot;&gt;&lt;/i&gt; UPLOAD&lt;/button&gt;
  &lt;ul class=&quot;nav nav-primary&quot;&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-th&quot;&gt;&lt;/i&gt; Dashboard&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-user&quot;&gt;&lt;/i&gt; Me&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;
      &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-time&quot;&gt;&lt;/i&gt; Time&lt;/a&gt;
      &lt;ul class=&quot;nav&quot;&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Today&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Tomarrow&lt;/a&gt;&lt;/li&gt;
        ...
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-list-ul&quot;&gt;&lt;/i&gt; All&lt;/a&gt;&lt;/li&gt;
    ...
    &lt;li class=&quot;active show&quot;&gt;
      &lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-tasks&quot;&gt;&lt;/i&gt; Status&lt;/a&gt;
      &lt;ul class=&quot;nav&quot;&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-circle-blank&quot;&gt;&lt;/i&gt; Ready&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-play-sign&quot;&gt;&lt;/i&gt; Ongoing&lt;/a&gt;&lt;/li&gt;
        ...
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/nav&gt;</code></pre>
      </section>

      <section id="pagers" data-id="pager">
        <div class="page-header">
          <h2>分页条 </h2>
        </div>

        <h3>各种分页导航</h3>
        <div class="example" contenteditable="true">
          <ul class="pager">
            <li class="previous"><a href="#">«</a></li>
            <li class="next"><a href="#">»</a></li>
          </ul>
          <ul class="pager">
            <li class="previous"><a href="#">« 上一页</a></li>
            <li class="next"><a href="#">下一页 »</a></li>
          </ul>
          <ul class="pager">
            <li class="previous"><a href="#">«</a></li>
            <li><a href="#">1</a></li>
            <li class="active"><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li class="next"><a href="#">»</a></li>
          </ul>
          <ul class="pager">
            <li class="previous"><a href="#">«</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li class="active"><a href="#">5</a></li>
            <li><a href="###" data-toggle="pager" data-placement="bottom">更多</a></li>
            <li><a href="#">12</a></li>
            <li class="next"><a href="#">»</a></li>
          </ul>
          <ul class="pager">
            <li class="previous"><a href="#">« 上一页</a></li>
            <li><a href="#">1</a></li>
            <li>
              <a href="###" data-toggle="pager" data-placement="top" data-url="?page=%">Pager</a>
            </li>
            <li><a href="#">6</a></li>
            <li class="active"><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
            <li><a href="###" data-toggle="pager" data-placement="top">...</a></li>
            <li><a href="#">12</a></li>
            <li class="next"><a href="#">下一页 »</a></li>
          </ul>
        </div>
        <h2>状态</h2>
        <h3>禁用的导航</h3>
        <div class="example" contenteditable="true">
          <ul class="pager">
            <li class="previous disabled"><a href="#">«</a></li>
            <li class="next"><a href="#">»</a></li>
          </ul>
          <ul class="pager">
            <li class="previous"><a href="#">« 上一页</a></li>
            <li class="next disabled"><a href="#">下一页 »</a></li>
          </ul>
          <ul class="pager">
            <li class="previous disabled"><a href="#">«</a></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li class="next"><a href="#">»</a></li>
          </ul>
          <ul class="pager">
            <li class="previous"><a href="#">«</a></li>
            <li><a href="#">1</a></li>
            <li>
              <a href="###" data-toggle="pager">Pager</a>
            </li>
            <li><a href="#">118</a></li>
            <li><a href="#">119</a></li>
            <li><a href="#">1110</a></li>
            <li><a href="#">1111</a></li>
            <li class="active"><a href="#">12</a></li>
            <li class="next disabled"><a href="#">»</a></li>
          </ul>
          <br>
        </div>
        <h2>参数</h2>
        <h3>圆角</h3>
        <p><code>.pager-pills</code></p>
        <div class="example" contenteditable="true">
          <ul class="pager pager-pills">
            <li class="previous disabled"><a href="#">«</a></li>
            <li class="next"><a href="#">»</a></li>
          </ul>
          <ul class="pager pager-pills">
            <li class="previous"><a href="#">« 上一页</a></li>
            <li class="next disabled"><a href="#">下一页 »</a></li>
          </ul>
          <ul class="pager pager-pills">
            <li class="previous disabled"><a href="#">«</a></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li class="next"><a href="#">»</a></li>
          </ul>
          <ul class="pager pager-pills">
            <li class="previous"><a href="#">«</a></li>
            <li><a href="#">1</a></li>
            <li><a href="###" data-toggle="pager" data-placement="top">...</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
            <li><a href="#">10</a></li>
            <li><a href="#">11</a></li>
            <li class="active"><a href="#">12</a></li>
            <li class="next disabled"><a href="#">»</a></li>
          </ul>
          <br>
        </div>
        <h3>宽松的</h3>
        <p><code>.pager-loose</code></p>
        <div class="example" contenteditable="true">
          <ul class="pager pager-loose">
            <li class="previous disabled"><a href="#">«</a></li>
            <li class="next"><a href="#">»</a></li>
          </ul>
          <ul class="pager pager-loose">
            <li class="previous"><a href="#">« 上一页</a></li>
            <li class="next disabled"><a href="#">下一页 »</a></li>
          </ul>
          <ul class="pager pager-loose">
            <li class="previous disabled"><a href="#">«</a></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li class="next"><a href="#">»</a></li>
          </ul>
          <ul class="pager pager-loose">
            <li class="previous"><a href="#">«</a></li>
            <li><a href="#">1</a></li>
            <li><a href="###" data-toggle="pager" data-placement="top">...</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
            <li><a href="#">10</a></li>
            <li><a href="#">11</a></li>
            <li class="active"><a href="#">12</a></li>
            <li class="next disabled"><a href="#">»</a></li>
          </ul>
          <ul class="pager pager-loose pager-pills">
            <li class="previous disabled"><a href="#">«</a></li>
            <li class="next"><a href="#">»</a></li>
          </ul>
          <ul class="pager pager-loose pager-pills">
            <li class="previous"><a href="#">« 上一页</a></li>
            <li class="next disabled"><a href="#">下一页 »</a></li>
          </ul>
          <ul class="pager pager-loose pager-pills">
            <li class="previous disabled"><a href="#">«</a></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li class="next"><a href="#">»</a></li>
          </ul>
          <ul class="pager pager-loose pager-pills">
            <li class="previous"><a href="#">«</a></li>
            <li><a href="#">1</a></li>
            <li><a href="###" data-toggle="pager" data-placement="top">...</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
            <li><a href="#">10</a></li>
            <li><a href="#">11</a></li>
            <li class="active"><a href="#">12</a></li>
            <li class="next disabled"><a href="#">»</a></li>
          </ul>
        </div>
        <h3>两端对齐</h3>
        <p><code>.pager-justify</code></p>
        <div class="example" contenteditable="true">
          <ul class="pager pager-justify">
            <li class="previous disabled"><a href="#">«</a></li>
            <li class="next"><a href="#">»</a></li>
          </ul>
          <ul class="pager pager-justify">
            <li class="previous"><a href="#">« 上一页</a></li>
            <li class="next disabled"><a href="#">下一页 »</a></li>
          </ul>
          <ul class="pager pager-justify pager-pills">
            <li class="previous disabled"><a href="#">«</a></li>
            <li class="next"><a href="#">»</a></li>
          </ul>
          <ul class="pager pager-justify pager-pills">
            <li class="previous"><a href="#">« 上一页</a></li>
            <li class="next disabled"><a href="#">下一页 »</a></li>
          </ul>
        </div>
      </section>

      <section id="panels">
        <div class="page-header">
          <h2>面板 </h2>
        </div>

        <h3>类型</h3>
        <h4>基本类型</h4>
        <div class="example" contenteditable="true">
          <div class="panel">
            <div class="panel-body">默认的.panel所做的只是提供基本的边界和内部，来包含内容。</div>
          </div>
        </div>
        <h4>带标题</h4>
        <div class="example" contenteditable="true">
          <div class="panel">
            <div class="panel-heading">面板标题</div>
            <div class="panel-body">面板内容</div>
          </div>
        </div>
        <h4>带脚注</h4>
        <div class="example" contenteditable="true">
          <div class="panel">
            <div class="panel-body">面板内容</div>
            <div class="panel-footer">面板脚注</div>
          </div>
        </div>

        <h3>变化</h3>
        <h4>颜色</h4>
        <div class="example" contenteditable="true">
          <div class="panel panel-primary">
            <div class="panel-heading">.panel-primary</div>
            <div class="panel-body">面板内容</div>
          </div>
          <div class="panel panel-success">
            <div class="panel-heading">.panel-success</div>
            <div class="panel-body">面板内容</div>
          </div>
          <div class="panel panel-warning">
            <div class="panel-heading">.panel-warning</div>
            <div class="panel-body">面板内容</div>
          </div>
          <div class="panel panel-danger">
            <div class="panel-heading">.panel-danger</div>
            <div class="panel-body">面板内容</div>
          </div>
          <div class="panel panel-info">
            <div class="panel-heading">.panel-info</div>
            <div class="panel-body">面板内容</div>
          </div>
        </div>

        <h4>包含表格</h4>
        <div class="example" contenteditable="true">
          <div class="panel">
            <!-- Default panel contents -->
            <div class="panel-heading">Panel heading</div>
            <!-- Table -->
            <table class="table">
              <thead>
                <tr>
                  <th>Lorem ipsum.</th>
                  <th>Repudiandae, harum!</th>
                  <th>Tenetur, corporis.</th>
                  <th>Perspiciatis, porro?</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Lorem ipsum.</td>
                  <td>Officiis, non.</td>
                  <td>Molestias, qui.</td>
                  <td>Odit, ducimus.</td>
                </tr>
                <tr>
                  <td>Lorem ipsum.</td>
                  <td>Repellendus, exercitationem!</td>
                  <td>Velit, eos.</td>
                  <td>Eius, officiis.</td>
                </tr>
                <tr>
                  <td>Lorem ipsum.</td>
                  <td>Amet, esse!</td>
                  <td>Quis, pariatur!</td>
                  <td>Totam, quae.</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <h4>包含列表</h4>
        <div class="example" contenteditable="true">
          <div class="panel">
            <div class="panel-heading">Panel heading</div>
            <ul class="list-group">
              <li class="list-group-item">todo</li>
              <li class="list-group-item">story</li>
              <li class="list-group-item">task</li>
              <li class="list-group-item">bug</li>
              <li class="list-group-item">case</li>
            </ul>
          </div>
        </div>

        <h4>面板组</h4>
        <div class="example" contenteditable="true">
          <div class='panel-group'>
            <div class="panel">
              <div class="panel-heading">面板标题</div>
              <div class="panel-body">面板内容</div>
              <div class="panel-footer">面板脚注</div>
            </div>
            <div class="panel">
              <div class="panel-heading">面板标题</div>
              <div class="panel-body">面板内容</div>
              <div class="panel-footer">面板脚注</div>
            </div>
            <div class="panel">
              <div class="panel-heading">面板标题</div>
              <div class="panel-body">面板内容</div>
              <div class="panel-footer">面板脚注</div>
            </div>
          </div>
        </div>
      </section>

      <section id="tables" data-id="table">
        <div class="page-header">
          <h2>表格 </h2>
        </div>
        <h3>类型</h3>
        <div class="example" contenteditable="true">
          <table class="table">
            <tbody>
              <tr>
                <th class="col-md-2">名称</th>
                <th>描述</th>
              </tr>
              <tr>
                <td>表头</td>
                <td>一般表格的第一行作为表头，用于描述表中每一列数据名称。为区别于表格其他行，表头具备不同的样式，例如字体加粗等。在垂直显示一组数据的表格中，表头也可能是垂直的第一列，而不是行。</td>
              </tr>
              <tr>
                <td>内容</td>
                <td>一般内容会在单元格内靠左对齐，对于数字可能靠右对齐比较好。在一些表格中，内容可以按单元格选择或者按行选择，选中的部分会以不同的样式区分。为了使得行与行便于区分，通常也会使得行交替使用不同的背景色。图片或其他控件也可以应用单元格中。</td>
              </tr>
              <tr>
                <td>表尾</td>
                <td>表位放置与表末尾提供与表相关补充数据或操作，不过并不常见。</td>
              </tr>
            </tbody>
          </table>
        </div>

        <h3>参数</h3>
        <h4>隔行交替样式的表</h4>
        <p><code>.table-striped</code></p>
        <div class="example" contenteditable="true">
          <table class="table table-striped">
            <thead>
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>Sunshine</td>
                <td>Sunday</td>
                <td>catouse</td>
              </tr>
              <tr>
                <td>4</td>
                <td>Sunday</td>
                <td>Sunshine</td>
                <td>catouse</td>
              </tr>
              <tr>
                <td>2</td>
                <td>catouse</td>
                <td>azhi</td>
                <td>zenUI</td>
              </tr>
              <tr>
                <td>3</td>
                <td>&nbsp;</td>
                <td>Lady Gaga</td>
                <td>catouse</td>
              </tr>
            </tbody>
          </table>
        </div>

        <h4>响应鼠标悬停</h4>
        <p><code>.table-hover</code></p>
        <div class="example" contenteditable="true">
          <table class="table table-hover">
            <thead>
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>Sunshine</td>
                <td>Sunday</td>
                <td>catouse</td>
              </tr>
              <tr>
                <td>4</td>
                <td>Sunday</td>
                <td>Sunshine</td>
                <td>catouse</td>
              </tr>
              <tr>
                <td>2</td>
                <td>catouse</td>
                <td>azhi</td>
                <td>zenUI</td>
              </tr>
              <tr>
                <td>3</td>
                <td>&nbsp;</td>
                <td>Lady Gaga</td>
                <td>catouse</td>
              </tr>
            </tbody>
          </table>
        </div>

        <h4>带所有边框的表格</h4>
        <p><code>.table-bordered</code></p>
        <div class="example" contenteditable="true">
          <table class="table table-bordered">
            <thead>
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>Sunshine</td>
                <td>Sunday</td>
                <td>catouse</td>
              </tr>
              <tr>
                <td>4</td>
                <td>Sunday</td>
                <td>Sunshine</td>
                <td>catouse</td>
              </tr>
              <tr>
                <td>2</td>
                <td>catouse</td>
                <td>azhi</td>
                <td>zenUI</td>
              </tr>
              <tr>
                <td>3</td>
                <td>&nbsp;</td>
                <td>Lady Gaga</td>
                <td>catouse</td>
              </tr>
            </tbody>
          </table>
        </div>

        <h4>更为紧凑的表格</h4>
        <p><code>.table-condensed</code></p>
        <div class="example" contenteditable="true">
          <table class="table table-condensed">
            <thead>
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>catouse</td>
                <td>hello</td>
                <td>world</td>
              </tr>
              <tr>
                <td>2</td>
                <td>jay</td>
                <td>thks</td>
                <td>jajaja</td>
              </tr>
              <tr>
                <td>3</td>
                <td>JK row</td>
                <td>thks</td>
                <td>Pa</td>
              </tr>
            </tbody>
          </table>
        </div>

        <h4>色彩标记</h4>
        <p>可以根据语义标记整行或者某一单元格</p>
        <div class="example" contenteditable="true">
          <table class="table">
            <thead>
              <tr>
                <th>#</th>
                <th>描述</th>
                <th>Payment Taken</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
              <tr class="success">
                <td>1</td>
                <td>表示成功或积极的行为。</td>
                <td>01/04/2012</td>
                <td>Approved</td>
              </tr>
              <tr class="danger">
                <td>2</td>
                <td>表示一个危险或存有潜在危险的行为。</td>
                <td>02/04/2012</td>
                <td>Declined</td>
              </tr>
              <tr class="warning">
                <td>3</td>
                <td>表示警告，可能需要注意。</td>
                <td>03/04/2012</td>
                <td>Pending</td>
              </tr>
              <tr class="active">
                <td>4</td>
                <td>标记为激活行。</td>
                <td>04/04/2012</td>
                <td>Call in to confirm</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>

      <section id="buttongroup" data-id="button.group">
        <div class="page-header">
          <h2>按钮组 </h2>
        </div>

        <h3>类型</h3>
        <h4>一组按钮</h4>
        <p>通过div.btn-group包含多个button</p>
        <div class="example" contenteditable="true">
          <div class="btn-group">
            <button type="button" class="btn">左</button>
            <button type="button" class="btn">中</button>
            <button type="button" class="btn">右</button>
          </div>
        </div>

        <h4>多组按钮</h4>
        <p>通过div.btn-toolbar包含.div.btn-group</p>
        <div class="example" contenteditable="true">
          <div class="btn-toolbar" style="margin: 0;">
            <div class="btn-group">
              <button class="btn">1</button>
              <button class="btn">2</button>
              <button class="btn">3</button>
              <button class="btn">4</button>
            </div>
            <div class="btn-group">
              <button class="btn">5</button>
              <button class="btn">6</button>
              <button class="btn">7</button>
            </div>
            <div class="btn-group">
              <button class="btn">8</button>
            </div>
          </div>
        </div>

        <h4>垂直按钮组</h4>
        <p>通过div.btn-group-vertical实现</p>
        <div class="example" contenteditable="true">
          <div class="btn-group btn-group-vertical">
            <button type="button" class="btn">上</button>
            <button type="button" class="btn">中</button>
            <button type="button" class="btn">下</button>
          </div>
        </div>
        <h3>变化</h3>
        <h4>基本下拉按钮组</h4>
        <p>将<code>.input-group</code>放置于另一个<code>.input-group</code>中。</p>
        <div class="example" contenteditable="true">
          <div class="btn-group">
            <button type="button" class="btn btn-default">吃</button>
            <button type="button" class="btn btn-default">喝</button>

            <div class="btn-group">
              <button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                更多
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupDrop1">
                <li><a href="#">拉</a></li>
                <li><a href="#">撒</a></li>
              </ul>
            </div>
          </div>
        </div>
        <h4>分裂式下拉按钮组</h4>
        <p>基本按钮组的变形，将第二个按钮改成图标即可。</p>
        <div class="example" contenteditable="true">
          <div class="btn-group">
            <button type="button" class="btn btn-danger">操作</button>
            <div class="btn-group">
              <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
                <span class="sr-only">操作</span>
              </button>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">编辑</a></li>
                <li><a href="#">删除</a></li>
                <li class="divider"></li>
                <li><a href="#">增加</a></li>
              </ul>
            </div>
          </div>
        </div>
        <h4>上拉按钮组</h4>
        <p>通过div.dropup实现</p>
        <div class="example" contenteditable="true">
          <div class="btn-group dropup">
            <button type="button" class="btn btn-danger">操作</button>
            <div class="btn-group">
              <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
                <span class="sr-only">操作</span>
              </button>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">编辑</a></li>
                <li><a href="#">删除</a></li>
                <li class="divider"></li>
                <li><a href="#">增加</a></li>
              </ul>
            </div>
          </div>
        </div>
        <h4>大小</h4>
        <p>通过.btn-lg .btn-sm .btn-xs实现</p>
        <div class="example" contenteditable="true">
          <div class="btn-toolbar" style="margin: 0;">
            <div class="btn-group">
              <button type="button" class="btn btn-lg">左</button>
              <button type="button" class="btn btn-lg">中</button>
              <button type="button" class="btn btn-lg">右</button>
            </div>
            <div class="btn-group">
              <button type="button" class="btn">左</button>
              <button type="button" class="btn">中</button>
              <button type="button" class="btn">右</button>
            </div>
            <div class="btn-group">
              <button type="button" class="btn btn-sm">左</button>
              <button type="button" class="btn btn-sm">中</button>
              <button type="button" class="btn btn-sm">右</button>
            </div>
            <div class="btn-group">
              <button type="button" class="btn btn-xs">左</button>
              <button type="button" class="btn btn-xs">中</button>
              <button type="button" class="btn btn-xs">右</button>
            </div>
          </div>
        </div>

        <h4>颜色</h4>
        <div class="example" contenteditable="true">
          <div class="btn-group">
            <button type="button" class="btn">默认</button>
            <button type="button" class="btn btn-primary">.btn-primary</button>
            <button type="button" class="btn btn-warning">.btn-primary</button>
            <button type="button" class="btn btn-danger">.btn-danger</button>
            <button type="button" class="btn btn-success">.btn-success</button>
            <button type="button" class="btn btn-info">.btn-info</button>
          </div>
        </div>
      </section>
    </div>

    <script src="../assets/jquery.js"></script>
    <script src="../dist/js/zui.min.js"></script>
    <script src="../assets/google-code-prettify/prettify.js"></script>
    <script src="js/doc.js"></script>

  <script src="http://s95.cnzz.com/stat.php?id=1253026255&web_id=1253026255"></script>
<script>
  $('.menu .nav li:not(".nav-parent") a').click(function()
  {
      var $this = $(this);
      $('.menu .nav .active').removeClass('active');
      $this.closest('li').addClass('active');
      var parent = $this.closest('.nav-parent');
      if(parent.length)
      {
          parent.addClass('active');
      }
  });

  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-53781622-1', 'auto');
  ga('send', 'pageview');
</script>
  </body>
</html>
